import React from 'react';
// import React from './ireact/react';
import ReactDOM from 'react-dom';
// import ReactDOM from './ireact/react-dom';

// 能且只能在构造函数中给this.state赋值
class Counter extends React.Component{
  constructor(props) {
    super(props);
    this.state = {number: 0, name: this.props.name};
  }

  handleClick = () => {
    this.setState({number: this.state.number + 1});
    console.log(this.state.number); //0
    this.setState({number: this.state.number + 1});
    console.log(this.state.number); //0
    //
    /*this.setState((lastState)=>({number: lastState.number + 1}))
    console.log(this.state.number); //0
    this.setState((lastState)=>({number: lastState.number + 1}),(state)=>{
      console.log('cb state:', state); //这个回调会在渲染完成后执行 意思是说state是渲染完成后的值
    })
    console.log(this.state.number); //0*/

    /** 只要在handleClick执行栈以内就是批量的, 否则就不是批量的*/

    setTimeout(()=>{
      this.setState({number: this.state.number + 1});
      console.log(this.state.number); //2
      this.setState({number: this.state.number + 1});
      console.log(this.state.number); //3
    },1000)

    /*queueMicrotask(()=>{
      this.setState({number: this.state.number + 1});
      console.log(this.state.number); //2
      this.setState({number: this.state.number + 1});
      console.log(this.state.number); //3
    })*/
  };

  render(){
    return (
      <div>
        <p>{this.state.name}</p>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>
          <span>+</span>
        </button>
      </div>
    );
  }
}

ReactDOM.render((
  <Counter name={'计数器'}/>
), document.getElementById('root'));
